<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待审核商品</title>
    <script src="../../asserts/dist/vue.js"></script>
    <script src="../../asserts/dist/layui.js"></script>
    <script src="../../asserts/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../asserts/dist/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../plugins/Bootstrap/css/bootstrap.css">
    <script src="../plugins/Bootstrap/js/bootstrap.js"></script>
</head>
<body>
<select id="type" name="type">
    <option value="全部类型">全部类型</option>
    <option value="1">数码产品</option>
    <option value="2">手机</option>
    <option value="3">xcx</option>
    <option value="4">食品</option>
    <option value="5">饮料</option>
    <option value="6">零食</option>
    <option value="7">男装</option>
    <option value="8">女装</option>
    <option value="9">电器</option>
    <option value="10">服装</option>
    <option value="11">香水彩妆</option>
</select>
</body>

<body>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script type="text/html" id="imgtmp">
    <img src="{{d.url}}" style="width: 108px;height: 100px;">
</script>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">编辑信息</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="id" class="control-label">id:</label>
                        <span id="id"></span>

                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label">商品名称</label>
                        <textarea class="form-control" id="name"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="price" class="control-label">价格</label>
                        <textarea class="form-control" id="price"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="img" class="control-label">照片</label>
                        <input type="file" id="img">
                    </div>
                    <div class="form-group">
                        <label for="repertory" class="control-label">库存</label>
                        <textarea class="form-control" id="repertory"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="context" class="control-label">商品描述</label>
                        <textarea class="form-control" id="context"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="tName" class="control-label">类型</label>
                        <textarea class="form-control" id="tName"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="discountPrice" class="control-label">折后价</label>
                        <textarea class="form-control" id="discountPrice"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="proCost" class="control-label">成本价</label>
                        <textarea class="form-control" id="proCost"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="close">返回</button>
                <button type="button" class="btn btn-primary" id="updateProduct">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        let url="/taobei_web/Store/queryProductLimit";
        $("#type").change(function () {
            if ($("#type").val()=="全部类型"){
                url="/taobei_web/Store/queryProductLimit";
                init();
            }else {
                url="/taobei_web/Store/queryProductByTypeId?id="+$("#type").val()
                init()
            }
        })

        init();

        function init() {
            layui.use('table',function () {
                var table = layui.table;
                //第一个实例
                table.render({
                    elem:'#demo'
                    ,height:'full-60'
                    ,  url:url
                    ,method:'get'
                    ,page:true
                    ,cols:[[
                        {field:'id',title:'商品id',width:100,sort:true},
                        {field:'name',title:'商品名称',width:100,sort:true},
                        {field:'price',title:'价格',width:100,sort:true},
                        /*{field:'flag',title:'审核情况',width:100,sort:true},*/
                        {field:'url',title:'照片',width:120,sort:true,templet:'#imgtmp'},
                        {field:'repertory',title:'库存',width:80,sort:true},
                        {field:'context',title:'商品描述',width:80,sort:true},
                        /*   {field:'tName',title:'类型',width:80,sort:true},*/
                        {field:'storeId',title:'商家id',width:80,sort:true},
                        {field:'pushTime',title:'上架时间',width:80,sort:true},
                        {field:'sale',title:'销量',width:80,sort:true},
                        {field:'discountPrice',title:'折后价',width:80,sort:true},
                        {field:'star',title:'评星',width:80,sort:true},
                        {field:'proCost',title:'成本价',width:80,sort:true},
                        {field:'right',title:'操作',width:150,sort:true,toolbar:'#barDemo'},
                    ]]
                });

                //监听行事件
                table.on('tool(test)',function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event==='del'){
                        layer.confirm('真的删除么',function (index) {

                            $.ajax({
                                url:'/taobei_web/pro/delProductById',
                                data:{
                                    id:data.id
                                },
                                type:'post',
                                dataType:'json',
                                success:function (respBean) {
                                    if (respBean.status==200){
                                        obj.del();
                                        layer.close(index);
                                        layer.msg(respBean.msg)
                                    }else {
                                        layer.close(index);
                                        layer.msg("删除失败")
                                    }

                                }
                            })
                            /*  obj.del();
                              layer.close(index);*/
                        });
                    }        else if (obj.event==='edit'){
                        $("#id").text(data.id)
                        $("#name").val(data.name)
                        $("#price").val(data.price)
                        $("#repertory").val(data.repertory)
                        $("#context").val(data.context)
                        $("#tName").val(data.tName)
                        $("#discountPrice").val(data.discountPrice)
                        $("#proCost").val(data.proCost)

                        $("#updateProduct").click(function () {
                            $.ajax({
                                url:'/taobei_web/pro/updateProductById',
                                type:'post',
                                data:{
                                    id:data.id,
                                    name:$("#name").val(),
                                    price:$("#price").val(),
                                    repertory:$("#repertory").val(),
                                    context:$("#context").val(),
                                    tName:$("#tName").val(),
                                    discountPrice:$("#discountPrice").val(),
                                    proCost:$("#proCost").val()
                                },
                                dataType:'json',
                                success:function (respBean) {
                                    layer.msg(respBean.msg)
                                    $("#close").click()
                                    timer = setTimeout(function () {
                                        history.go(0);
                                    },1000)

                                },
                                error:function (respBean) {
                                    layero.msg("修改失败")
                                }
                            })
                        })
                    }
                })
            });
        }
    })
</script>

</body>
</html>